<template>
	<view class="date-chooser comp">
		<view class="date-chooser-top">
			<view
				v-for="(item, index) in topTabs"
				:key="index"
				:class="['date-chooser-top-item', { active: index === topTabIndex }]"
				@click="handleChooseTopTab(index)"
			>
				{{ item }}
			</view>
		</view>
		<view v-if="loaded" class="date-chooser-btm">
			<view v-for="(item, index) in btmTabsData[topTabIndex]" :key="index" class="date-chooser-btm-item">
				{{ item.date }}
				<view v-if="index == 1" class="date-chooser-btm-item-line"></view>
			</view>
			<view class="date-chooser-btm-left" @click="handlePrev">
				<uni-icons type="back" color="#000" size="22"></uni-icons>
				<!-- <image src="@/static/icon/icon-left.png"></image> -->
			</view>
			<view class="date-chooser-btm-right" @click="handleNext">
				<uni-icons type="forward" color="#000" size="22"></uni-icons>
				<!-- <image :class="{ disable: !btmTabsData[topTabIndex][2].date }" src="@/static/icon/icon-right.png"></image> -->
			</view>
		</view>
	</view>
</template>

<script>
import moment from "moment";

export default {
	props: {
		defaultDate: String || null,
	},
	data() {
		return {
			topTabs: ["日", "周", "月"],
			topTabIndex: 0,
			btmTabsData: [[], [], []],
			loaded: false,
			timer: null,
		};
	},
	mounted() {
		// 设置 moment 的本地化 设置周日为一周的第一天
		moment.updateLocale("en", {
			week: {
				dow: 0,
			},
		});
		this.initTabData();
		this.loaded = true;
	},
	methods: {
		debounce(fn, delay) {
			if (this.timer !== null) {
				clearTimeout(this.timer);
			}
			this.timer = setTimeout(() => {
				fn && fn();
			}, delay);
		},

		emitFn(name, data) {
			this.debounce(() => {
				this.$emit(name, data);
			}, 500);
		},

		initTabData() {
			this.getDayData(true);
			this.getWeekData(true);
			this.getMonthData(true);

			if (this.defaultDate) {
				const date = moment(this.defaultDate);
				const diff_days = moment().diff(date, "days");
				
				if (diff_days <= 0) {
					return;
				}
				for (let index = 0; index < diff_days; index++) {
					this.getDayData(false, false);
				}
			}
		},
		getDayData(isInit = false, isNext = false) {
			let now = moment();
			if (isInit) {
				let btmTabsData = [
					{
						moment: moment().subtract(1, "day").clone(),
						endMoment: moment().subtract(1, "day").endOf("day").clone(),
						startMoment: moment().subtract(1, "day").startOf("day").clone(),
						date: moment().subtract(1, "day").format("MM.DD"),
					},
					{
						moment: moment().clone(),
						endMoment: moment().endOf("day").clone(),
						startMoment: moment().startOf("day").clone(),
						date: now.format("MM.DD"),
					},
					{
						moment: null,
						endMoment: null,
						startMoment: null,
						date: "",
					},
				];
				this.emitFn("chooseDate", {
					...btmTabsData[1],
					type: "day",
				});
				this.$set(this.btmTabsData, 0, btmTabsData);
			} else {
				let newData = [...this.btmTabsData[0]];
				if (isNext) {
					if (!newData[2].moment) return;
					if (newData[2].moment.isSame(now, "day")) {
						newData.shift();
						newData.push({
							moment: null,
							endMoment: null,
							startMoment: null,
							date: "",
						});
					} else {
						newData.shift();
						let baseMoment = newData[1].moment.clone();
						newData.push({
							moment: moment(baseMoment).add(1, "day").clone(),
							endMoment: moment(baseMoment).add(1, "day").endOf("day").clone(),
							startMoment: moment(baseMoment).add(1, "day").startOf("day").clone(),
							date: moment(baseMoment).add(1, "day").format("MM.DD"),
						});
					}
					this.emitFn("chooseDate", {
						...newData[1],
						type: "day",
					});
					this.$set(this.btmTabsData, 0, newData);
				} else {
					newData.pop();
					let baseMoment = newData[0].moment;
					newData.unshift({
						moment: moment(baseMoment).subtract(1, "day").clone(),
						endMoment: moment(baseMoment).subtract(1, "day").endOf("day"),
						startMoment: moment(baseMoment).subtract(1, "day").startOf("day"),
						date: moment(baseMoment).subtract(1, "day").format("MM.DD"),
					});
					this.emitFn("chooseDate", {
						...newData[1],
						type: "day",
					});
					this.$set(this.btmTabsData, 0, newData);
				}
			}
		},
		getWeekData(isInit = false, isNext = false) {
			let now = moment().clone();
			if (isInit) {
				let lastWeekMoment = moment().subtract(7, "day").clone();
				let lastWeek = [lastWeekMoment.startOf("week").format("MM.DD"), lastWeekMoment.endOf("week").format("MM.DD")];
				let nowWeek = [now.startOf("week").format("MM.DD"), now.endOf("week").format("MM.DD")];
				let btmTabsData = [
					{
						moment: lastWeekMoment.clone(),
						endMoment: lastWeekMoment.endOf("week").clone(),
						startMoment: lastWeekMoment.startOf("week").clone(),
						date: lastWeek.join("-"),
					},
					{
						moment: now.clone(),
						startMoment: now.startOf("week").clone(),
						endMoment: now.endOf("week").clone(),
						date: nowWeek.join("-"),
					},
					{
						moment: null,
						startMoment: null,
						endMoment: null,
						date: "",
					},
				];
				this.$set(this.btmTabsData, 1, btmTabsData);
			} else {
				let newData = [...this.btmTabsData[1]];
				if (isNext) {
					if (!newData[2].moment) return;
					if (newData[2].moment.isSame(now, "week")) {
						newData.shift();
						newData.push({
							moment: null,
							startMoment: null,
							endMoment: null,
							date: "",
						});
					} else {
						newData.shift();
						let aMoment = newData[1].moment.clone().add(7, "day").clone();
						let newWeek = [aMoment.startOf("week").format("MM.DD"), aMoment.startOf("week").add(6, "day").format("MM.DD")];
						newData.push({
							moment: aMoment.clone(),
							startMoment: aMoment.startOf("week").clone(),
							endMoment: aMoment.startOf("week").add(6, "day").endOf("day").clone(),
							date: newWeek.join("-"),
						});
					}
					this.emitFn("chooseDate", {
						...newData[1],
						type: "week",
					});
					this.$set(this.btmTabsData, 1, newData);
				} else {
					newData.pop();
					let aMoment = newData[0].moment.clone().subtract(7, "day").clone();
					let newWeek = [aMoment.startOf("week").format("MM.DD"), aMoment.startOf("week").add(6, "day").format("MM.DD")];
					newData.unshift({
						moment: aMoment.clone(),
						startMoment: aMoment.startOf("week").clone(),
						endMoment: aMoment.startOf("week").add(6, "day").endOf("day").clone(),
						date: newWeek.join("-"),
					});
					this.emitFn("chooseDate", {
						...newData[1],
						type: "week",
					});
					this.$set(this.btmTabsData, 1, newData);
				}
			}
		},
		getMonthData(isInit = false, isNext = false) {
			let now = moment().clone();
			if (isInit) {
				let lastMonthMoment = moment().subtract(1, "month").clone();
				let lastMonth = lastMonthMoment.format("YYYY.MM");
				let nowMonth = now.format("YYYY.MM");

				let btmTabsData = [
					{
						moment: lastMonthMoment.clone(),
						startMoment: lastMonthMoment.startOf("month").clone(),
						endMoment: lastMonthMoment.endOf("month").clone(),
						date: lastMonth,
					},
					{
						moment: now.clone(),
						startMoment: now.startOf("month").clone(),
						endMoment: now.endOf("month").clone(),
						date: nowMonth,
					},
					{
						moment: null,
						startMoment: null,
						endMoment: null,
						date: "",
					},
				];
				this.$set(this.btmTabsData, 2, btmTabsData);
			} else {
				let newData = [...this.btmTabsData[2]];
				if (isNext) {
					if (!newData[2].moment) return;
					if (newData[2].moment.isSame(now, "month")) {
						newData.shift();
						newData.push({
							moment: null,
							startMoment: null,
							endMoment: null,
							date: "",
						});
					} else {
						newData.shift();
						let aMoment = newData[1].moment.clone().add(1, "month").clone();
						let newMonth = aMoment.format("YYYY.MM");
						newData.push({
							moment: aMoment.clone(),
							startMoment: aMoment.startOf("month").clone(),
							endMoment: aMoment.endOf("month").clone(),
							date: newMonth,
						});
					}
					this.emitFn("chooseDate", {
						...newData[1],
						type: "month",
					});
					this.$set(this.btmTabsData, 2, newData);
				} else {
					newData.pop();
					let aMoment = newData[0].moment.clone().subtract(1, "month").clone();
					let newMonth = aMoment.format("YYYY.MM");
					newData.unshift({
						moment: aMoment.clone(),
						startMoment: aMoment.startOf("month").clone(),
						endMoment: aMoment.endOf("month").clone(),
						date: newMonth,
					});
					this.emitFn("chooseDate", {
						...newData[1],
						type: "month",
					});
					this.$set(this.btmTabsData, 2, newData);
				}
			}
		},
		handleChooseTopTab(index) {
			if (index === this.topTabIndex) return;
			this.topTabIndex = index;
			this.btmTabs = this.btmTabsData[index];
			switch (index) {
				case 0:
					this.emitFn("chooseDate", {
						...this.btmTabsData[0][1],
						type: "day",
					});
					break;
				case 1:
					this.emitFn("chooseDate", {
						...this.btmTabsData[1][1],
						type: "week",
					});
					break;
				case 2:
					this.emitFn("chooseDate", {
						...this.btmTabsData[2][1],
						type: "month",
					});
					break;
			}
		},
		handlePrev() {
			switch (this.topTabIndex) {
				case 0:
					this.getDayData(false, false);
					break;
				case 1:
					this.getWeekData(false, false);
					break;
				case 2:
					this.getMonthData(false, false);
					break;
			}
		},
		handleNext() {
			switch (this.topTabIndex) {
				case 0:
					this.getDayData(false, true);
					break;
				case 1:
					this.getWeekData(false, true);
					break;
				case 2:
					this.getMonthData(false, true);
					break;
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.date-chooser.comp .date-chooser-top {
	height: 72rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba($color: #000000, $alpha: 0.05);
	backdrop-filter: blur(20rpx);
	// background-color: #2D99FF;
	border-radius: 48rpx;
}

.date-chooser.comp .date-chooser-top-item {
	height: 72rpx;
	flex: 1;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: PingFang SC;
	font-size: 24rpx;
	font-weight: 500;
	border-radius: 48rpx;
	color: #00000080;
}

.date-chooser.comp .date-chooser-top-item.active {
	font-family: PingFang SC;
	font-size: 32rpx;
	font-weight: 500;
	color: white;
	background: #2d99ff;
	backdrop-filter: blur(20rpx);
}

.date-chooser.comp .date-chooser-btm {
	padding: 20rpx 0 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.date-chooser.comp .date-chooser-btm-item {
	flex: 1;
	height: 52rpx;
	padding-bottom: 4rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: PingFang SC;
	font-size: 24rpx;
	font-weight: 400;
	color: black;
	position: relative;
}

.date-chooser.comp .date-chooser-btm-item .date-chooser-btm-item-line {
	width: 48rpx;
	height: 4rpx;
	border-radius: 2rpx;
	background: #000;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

.date-chooser.comp .date-chooser-btm-item:nth-child(1) {
	// 暂时隐藏
	opacity: 0;
}

.date-chooser.comp .date-chooser-btm-item:nth-child(3) {
	// 暂时隐藏
	opacity: 0;
}

.date-chooser.comp .date-chooser-btm-item:nth-child(2) {
	font-family: PingFang SC;
	font-size: 32rpx;
	font-weight: 500;
	line-height: 44Rpx;
	text-align: left;
	color: black;
}

.date-chooser.comp .date-chooser-btm-left {
	width: 200rpx;
	height: 52rpx;
	position: absolute;
	top: 20rpx;
	left: 0;
	overflow: hidden;

	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.date-chooser.comp .date-chooser-btm-left uni-icons {
	display: block;
	width: 48rpx;
	height: 48rpx;
	position: absolute;
	top: 2rpx;
	left: 80rpx;
}

.date-chooser.comp .date-chooser-btm-right {
	width: 200rpx;
	height: 52rpx;
	position: absolute;
	top: 20rpx;
	right: 0;
	overflow: hidden;
}

.date-chooser.comp .date-chooser-btm-right uni-icons {
	display: block;
	width: 48rpx;
	height: 48rpx;
	position: absolute;
	top: 2rpx;
	right: 80rpx;

	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.date-chooser.comp .date-chooser-btm-right uni-icons.disable {
	opacity: 0.3;
}
</style>
